<template>
<l-layout >
    <l-panel>
        <template #toolLeft >
            <div class="l-panel--item" >
                <el-radio-group v-model="categoryId" size="mini" @change="handleCaregoryChange" >
                    <el-radio-button label="1">{{ $t('成功') }}</el-radio-button>
                    <el-radio-button label="2">{{ $t('失败') }}</el-radio-button>
                </el-radio-group>
            </div>
            <div class="l-panel--item" style="width:264px;" >
                <el-date-picker
                    v-model="operateTime"
                    size="mini"
                    type="daterange"
                    align="right"
                    unlink-panels
                    :start-placeholder="$t('开始日期')"
                    :end-placeholder="$t('结束日期')"
                    :picker-options="pickerOptions"
                    
                    @change="handleDateChange"
                    >
                </el-date-picker>
            </div>
            <div class="l-panel--item" >
                <el-input :placeholder="$t('任务名称')" v-model="keyWord" size="mini" @keyup.enter.native="hanleSearch" >
                    <el-button slot="append" icon="el-icon-search" @click="hanleSearch" ></el-button>
                </el-input>
            </div>
        </template>
        <template #toolRight >
            <l-tool-btns :hasAdd="false" >
                <l-excel-btns></l-excel-btns>
            </l-tool-btns>
        </template>
        <l-table 
            :loading="tableLoading"
            :columns="columns" 
            :dataSource="tableData" 
            row-key="f_Id"
            :isPage="true"
            :pageTotal="tableTotal"
            :tablePage.sync="tableCurrentPage"

            @loadPageData="turnTablePage"
             >
            <template v-slot:f_CreateDate="scope" >
                {{lr_dateFormat(scope.row.f_CreateDate)}}
            </template>
            <template v-slot:f_ExecuteResult="scope" >
                <el-tag v-if="scope.row.f_ExecuteResult == 1" size="mini" type="success">{{ $t('成功') }}</el-tag>
                <el-tag v-else size="mini" type="danger">{{ $t('失败') }}</el-tag>
            </template>
        </l-table>
    </l-panel>
</l-layout>
</template>

<script>
const api = window.$api.quartz.log
export default {
    data () {
        return {
            lr_isPage:true,
            
            categoryId:'1',
            operateTime:null,
            pickerOptions: {
            shortcuts: [{
                text: this.$t('最近一周'),
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
                }
            }, {
                text: this.$t('最近一个月'),
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
                }
            }, {
                text: this.$t('最近三个月'),
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
                }
            }]
            },

            // 表格
            columns: [
                {label:'名称',prop:'f_Name',width:'200'},
                {label:'时间',prop:'f_CreateDate',width:'160'},
                {label:'结果',prop:'f_ExecuteResult',width:'64',align:'center'},
                {label:'内容',prop:'f_Des',minWidth:'200'}
            ],
            tableLoading:false,
            tableTotal:0,
            tablePageSize:50,
            tableCurrentPage:1,
            tableData: [],
            keyWord:'',

            optionsDate:[
                {value:'7',label:this.$t('保留近一周')},
                {value:'1',label:this.$t('保留近一个月')},
                {value:'3',label:this.$t('保留近三个月')},
                {value:'0',label:this.$t('不保留，全部Delete')}
            ],
            formVisible:false,
            keepTime:'7'
        }
    },
    computed:{
    },
    mounted () {
        this.loadTablePageData()
    },
    methods:{
        loadTablePageData(isNotFirst){
            if(!isNotFirst){
                this.tableCurrentPage = 1;
            }
            this.tableLoading = true;
            let queryData = {
                rows:this.tablePageSize,
                page:this.tableCurrentPage,
                sidx:'f_CreateDate DESC',
                f_ExecuteResult:this.categoryId,
                f_Name:this.keyWord,
                f_CreateDate:this.operateTime?this.operateTime[0]:null,
                endDate:this.operateTime?this.operateTime[1]:null,
            }
            api.getPage(queryData).then(res=>{
                const data = this.$deepClone(res.data.data)
                this.tableData = data.rows
                this.tableTotal = data.records
                this.tableLoading = false

            }).catch(()=>{
                this.tableData = []
                this.tableLoading = false
            })
        },
        turnTablePage({rows}){
            this.tablePageSize = rows
            this.loadTablePageData(true)
        },
        handleCaregoryChange(){
            this.loadTablePageData()
        },
        handleDateChange(){
            this.loadTablePageData()
        },
        hanleSearch(){
            this.loadTablePageData()
        }
    }
}
</script>